<template>
  <div>
    <el-dialog
        title="分享表单"
        :visible.sync="dialogVisible"
        width="30%"
        @close="close"
        >
        <span>分享链接</span>
        <el-dropdown @command="allow_ban" trigger="click">
            <span class="el-dropdown-link">
            {{ allow_tip }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="关闭分享">关闭分享</el-dropdown-item>
            <el-dropdown-item command="允许任何人查看">允许任何人查看</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div v-show="allow">
            <div class="show_url" :title="shareUrl">{{ shareUrl }}</div>
            <a-tooltip placement="bottom">
                <div class="button_inner"
                    v-clipboard:copy="shareUrl"
                    v-clipboard:success="handleCopyOk"
                    v-clipboard:error="handleCopyErr"
                >
                <el-button type="primary" plain>复制链接</el-button>
                </div>
                <el-input v-model="label" placeholder="请输入标签" style="width: 270px"></el-input>
                <el-button @click="create_ewm" type="primary" plain class="button_inner" style="top: 165px;width:120px">生成二维码</el-button>
            </a-tooltip>
            <div v-if="shareQrCode!=''">
                <a :href="shareQrCode" download style="display:block;text-align:center;margin-bottom:10px;margin-top:15px">下载二维码</a>
                <div style="width: 200px;height: 200px;margin: auto">
                    <img :src="shareQrCode" style="width:100%;height:100%">
                </div>
            </div>
        </div>
        <h4 v-if="!allow" style="margin-top:20px;text-align:center">已关闭分享</h4>
    </el-dialog>
  </div>
</template>

<script>
import {worksheetewm, updateView, getViewDate} from '@/api/worksheet'
import qs from 'qs';
export default {
    props: {
        dialogVisible: {
            default: false
        },
        sharelable_view: {
            default: ''
        },
        viewid: {
            default: ''
        }
    },
    data() {
        return {
            allow: false,
            allow_tip: '',
            shareUrl: '',
            label: '',
            shareQrCode: ''
        }
    },
    methods: {
        async allow_ban(command){
            this.allow_tip = command
            if(command == "关闭分享"){
                this.$message.success('已关闭分享');
                this.allow = false
                await updateView({
                    worksheetId: this.worksheetId,
                    id: this.viewid,
                    shareState: 0
                })
            }else{
                this.$message.success('已开启分享');
                this.allow = true
                await updateView({
                    worksheetId: this.worksheetId,
                    id: this.viewid,
                    shareState: 1
                })
            }
        },
        async create_ewm() {
            let data = await worksheetewm(qs.stringify({content: this.shareUrl, label: this.label}))
            this.shareQrCode = `${window.location.origin}/file/${data.path}`
            await updateView({
                id: this.viewid,
                qrcode: data.path,
                qrlabel: this.label,
            })
        },
        handleCopyOk(){
            this.$message.success('复制成功');
        },
        handleCopyErr(){
            this.$message.error('复制失败');
        },
        close() {
            this.$emit('close')
        }
    },
    async mounted() {
        let data_view = await getViewDate(this.viewid)
        this.shareUrl = window.location.origin + `/worksheetshare/${this.appId}/${this.groupId}/${this.worksheetId}/${this.viewid}`
        if(data_view.data.data.qrcode!=''){
            this.shareQrCode = `${window.location.origin}/file/${data_view.data.data.qrcode}`
        }
        this.label = this.sharelable_view
        // else{
        //     let data = await worksheetewm(qs.stringify({content: this.shareUrl, label: this.label}))
        //     this.shareQrCode = `${window.location.origin}/file/${data.path}`
        //     await updateView({
        //         id: this.viewid,
        //         qrcode: data.path,
        //         qrlabel: this.label,
        //         shareState: data_view.data.data.shareState
        //     })
        // }
        if(data_view.data.data.shareState==1){
            this.allow_tip = "允许任何人查看"
            this.allow = true
        }else{
            this.allow_tip = "关闭分享"
            this.allow = false
        }
    },
    computed: {
        appId() {
            return this.$route.params.appId;
        },
        groupId() {
            return this.$route.params.groupId;
        },
        worksheetId() {
            return this.$route.params.worksheetId;
        },
    }   
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
    cursor: pointer;
    color: black;
    margin-left: 30px;

    .el-icon-arrow-down {
      font-size: 13px;
    }
  }
  .show_url {
    border:1px solid;
    border-radius: 2px;
    width: 270px;
    height: 40px;
    padding-left: 10px;
    padding-top: 10px;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 5px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .button_inner{
    position: absolute;
    top: 110px;
    left: 310px;
    width: 100px;
    // margin: auto;
  }

</style>